<script setup>
import { RouterLink, RouterView } from 'vue-router'
</script>

<template>
      <!-- 顶部导航栏 -->
      <div class="header">
      <div class="container">
        <el-row class="header-top" align="middle">
          <el-col :span="6">
            <div class="logo">
              <img src="/src/image/logo.png" alt="鞋城" class="logo-img" />
              <span class="brand-name">鞋城商城</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="search-section">
              <el-input
                v-model="searchText"
                placeholder="搜索您想要的鞋子..."
                class="search-input"
                size="large"
              >
                <template #append>
                  <el-button :icon="Search" />
                </template>
              </el-input>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="user-actions">
              <el-badge :value="cartCount" class="cart-badge">
                <el-button :icon="ShoppingCart" circle size="large" class="cart-btn" />
              </el-badge>
              <el-dropdown>
                <span class="user-info">
                  <el-avatar size="default" :icon="UserFilled" />
                  <span>用户中心</span>
                </span>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item>我的订单</el-dropdown-item>
                    <el-dropdown-item>个人资料</el-dropdown-item>
                    <el-dropdown-item>收货地址</el-dropdown-item>
                    <el-dropdown-item divided>退出登录</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  <RouterView />
</template>

<style scoped>
.header {
  background: linear-gradient(135deg, #ff8c00 0%, #ffa500 100%);
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.header-top {
  padding: 15px 0;
}

.logo {
  display: flex;
  align-items: center;
  gap: 12px;
}

.logo-img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.brand-name {
  font-size: 24px;
  font-weight: bold;
  color: white;
}

.search-section {
  display: flex;
  justify-content: center;
}

.search-input {
  width: 100%;
  max-width: 400px;
}

.user-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 15px;
}

.cart-btn {
  background-color: rgba(255,255,255,0.2);
  border-color: rgba(255,255,255,0.3);
  color: white;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 8px;
  color: white;
  cursor: pointer;
  font-size: 14px;
}

.nav-menu {
  padding-bottom: 0;
}

.main-menu {
  border: none;
  justify-content: center;
}

</style>
